<template>
  <div class="app-container">

    <el-button @click="toBack">返回</el-button>
    <el-button v-print="'#printTest'" type="primary">打印</el-button>
    <el-button type="primary" @click="toExcel">导出</el-button>

    <div id="printTest">
      <div>
        <!-- <p style="text-align:center;margin-top:30px">地址：{{ address }}&nbsp;&nbsp;&nbsp;&nbsp;电话：{{ phone }}</p> -->
      </div>
      <h2 style="text-align:center">{{ name2 }}</h2>
      <p v-if="identical==1" style="text-align:center">地址：</p>
      <h2 style="text-align:center">客户月结对账明细单</h2>
      <p class="dy">打印日期：{{ data }}</p>
      <div v-if="identical==1" class="jie">
        <p>客户：{{ name }}</p>
        <p>电话：{{ mobilePhone }}</p>
        <p>传真：{{ fax }}</p>
      </div>
      <table>
        <tr>
          <td v-if="identical==2" style="width:800px">客户名称</td>
          <td>出货日期</td>
          <td>任务编号</td>
          <td style="width:500px">物品单号/款号</td>
          <td>箱型</td>
          <td>长*宽*高</td>
          <td>数量</td>
          <td>单价</td>
          <td>金额</td>
        </tr>
        <tr v-for="item in tableData" :key="item.id">
          <td v-if="identical==2">{{ item.name }}</td>
          <td>{{ item.shipDate }}</td>
          <td>{{ item.no }}</td>
          <td>{{ item.modelNo }}</td>
          <td>{{ item.boxType }}</td>
          <td>{{ item.length }}*{{ item.width }}*{{ item.height }}</td>
          <td>{{ item.orderNum }}</td>
          <td>{{ item.perPrice }}</td>
          <td>{{ item.money }}</td>
        </tr>
      </table>
      <table style="margin-top:50px">
        <tr>
          <td><div class="span">本页出货总量：{{ sum_orderNum }}</div> </td>
          <td><div class="span">本页小计金额：{{ add_money }}</div></td>
          <td rowspan="2"><div class="span span_s">客户签名： </div></td>
        </tr>
        <tr>
          <td><div class="span">总计出货总量：{{ sum_orderNum }}</div></td>
          <td><div class="span">明细总计金额：{{ add_money }}</div></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
// 引入打印
import { export2Excel } from '@/utils/common'
import { list } from '@/api/basedata/firm'

import { getCustomerById } from '@/api/finance/verify_printing'
export default window.$crudCommon({
  name: 'Verify_printing',
  data() {
    return {
    // 表单数据
      tableData: [],
      address: '',
      mobilePhone: '',
      phone: '',
      fax: '',
      shipDate: '',
      time: '',
      name: '',
      data: '',
      width_height: '',
      sum_orderNum: '',
      add_money: '',
      name2: '',
      identical: '',
      tempArray: [],
      different: ''
    }
  },
  created: function() {
    this.tableData = this.$route.params.data
    var fir = []
    fir = this.tableData
    var sum = 0
    var add = 0
    fir.forEach(x => {
      x.cartonSize = x.length + 'X' + x.width + 'X' + x.height
      sum += x.orderNum
      add += x.money
    })
    this.sum_orderNum = sum
    this.add_money = add
    // console.log('aaa', this.tableData)
    this.tempArray = this.$route.params.data
    // 判断是否为相同客户
    for (var i = 0; i < this.tempArray.map(x => x.name).length; i++) {
      for (var j = i + 1; j < this.tempArray.map(x => x.name).length; j++) {
        if (this.tempArray.map(x => x.name)[i] !== this.tempArray.map(x => x.name)[j]) {
          this.identical = 2
          this.different = 2
        } else {
          this.identical = 1
        }
      }
    }
    if (this.different === 2) {
      this.identical = 2
    }
    if (this.$route.params.data.length === 1) {
      this.identical = 1
    }
    // console.log(this.$route.params.data)
    this.name = this.$route.params.data[0].name
    // 截取到年
    this.shipDate = this.$route.params.data[0].deliveryDate
    this.shipDate = this.shipDate.substring(0, 4)
    // 截取到月
    this.time = this.$route.params.data[0].deliveryDate
    // this.time = this.time.substring(5, 7)
    this.time = this.time.split('-')[1]
    // console.log(this.time)
    this.customerId = this.tableData[0].customerId
    // console.log(this.tableData)
    getCustomerById(this.customerId).then(res => {
      // console.log('bbbb', res)
      this.address = res.address
      this.mobilePhone = res.mobilePhone
      this.phone = res.phone
      this.fax = res.fax
    })
    var aData = new Date()
    this.data = aData.getFullYear() + '-' + (aData.getMonth() + 1) + '-' + aData.getDate()
    // console.log(this.data) // 2019-8-20
    list().then(res => {
      var firmList = []
      firmList = res.list
      firmList.forEach(a => {
        if (a.isFirm === true) {
          this.name2 = a.name
          // console.log('name:' + this.name2)
        }
      })
    })
  },
  methods: {
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        if (index === 1 || index === 2 || index === 3 || index === 5 || index === 10 || index === 11) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' '
        } else {
          sums[index] = 'N/A'
        }
      })

      return sums
    },
    // 返回
    toBack() {
      this.$router.push('/finance/verify')
    },
    // 打印功能
    toExcel() {
      var list = this.tableData
      const th = ['客户名称', '出货日期', '任务编号', '物品单号/款号', '箱型', '长x宽x高', '数量', '单价', '金额']
      const filterVal = ['name', 'shipDate', 'no', 'modelNo', 'boxType', 'cartonSize', 'orderNum', 'perPrice', 'money']
      const data = list.map(v => filterVal.map(k => v[k]))
      export2Excel(th, data, '对账明细打印单')
    },
    // beforeOpen(done, type) {
    //   this.setVal()
    //   done()
    // },
    // 列表前操作方法
    listBefore() {
    },

    // 列表后操作方法
    listAfter() {
    },

    // 新增前操作方法
    addBefore() {
      // this.form.createUser = 'small'
    },
    // 新增后操作方法
    addAfter() {
    },

    // 修改前操作方法
    updateBefore() {
      // this.form.updateUser = 'small'
    },

    // 修改后操作方法
    updateAfter() {},

    // 删除前操作方法
    delBefore() {},

    // 删除后操作方法
    delAfter() {}
  }
}, {
  name: 'finance/verify_printing', // 模块名字
  list: 'getRoles', // 列表接口名字
  update: 'editRole', // 更新接口名字
  add: 'addRole', // 新增接口名字
  del: 'removeRole', // 删除接口名字
  rowKey: 'id', // 主键
  pageNumber: 'pageNumber', // 页码
  pageSize: 'pageSize', // 页数
  total: 'total', // 总页数
  data: 'list'// 列表属性
})
</script>
<style lang="scss" scoped>
.jie{
  margin-top: -80px;
  width:900px;
  height: 90px;
  margin: 0 auto;
  // margin-bottom: 80px;
  // border-bottom:1px solid #717171;
}
.jie>p{
  line-height: 10px;
}
.dy{
  // float: left;
  text-align: center;
  // margin: -30px 0 0 40%  ;
}

table,tr,td{
  border:1px solid black;
}
table{
  width:900px;
  border-collapse:collapse;
  height: auto;
  margin: 0 auto;
  // margin-right: 250px;
}
tr{
  height: 35px;
}
table td{
  height: 35px;
}
td{
  width: 180px;
  text-align: center ;
  padding-left:15px;
  // line-height: 35px;
}
.span{
  font-weight:bold;
  text-align:left
}
.span_s{
  margin-top: -25px;
}
</style>
<style media="print">
  body {
    border: solid 1px #ffffff;
    margin:0;
  }
</style>
